<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="最低提现金额" prop="min">
            <el-input-number v-model="form.min" :min="0" label="请输入最低提现金额"></el-input-number> / 元
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最高提现金额" prop="max">
            <el-input-number v-model="form.max" :min="-1" label="请输入最高提现金额"></el-input-number> / 元
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="提现手续费" prop="nickName">
            <el-input-number v-model="form.fee" :min="0" label="请输入最高提现金额"></el-input-number> / ‰
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否开启审核" prop="audit">
            <el-radio-group v-model="form.audit" size="small">
              <el-radio :label="true" border>开启审核</el-radio>
              <el-radio :label="false" border>无需审核</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>注意</span>
      </div>
      <p>1、最低提现金额必须小于等于最高提现金额</p>
      <p>2、最高提现金额设置 < 0 （约定为 -1 ） ，代表不限制最高提现金额</p>
      <p>3、提现手续费数值不能为负数，最大值999，设置为0代表不收取提现手续费</p>
      <p>4、是否开启审核，开启代表提现时需要后台审核通过后，才能打款，关闭代表无需审核直接打款</p>
    </el-card>
  </div>
</template>

<script>
import { getSettingByKey, updateSetting } from '@/api/sysSet/setting'

export default {
  name: 'WithdrawSetting',
  dicts: ['sys_yes_no'],
  data() {
    return {
      configName: '提现配置',
      configKey: 'withdraw_config',
      // 表单参数
      form: {
        min: 0,
        max: 9999999,
        fee: 0,
        audit: true
      },
      settingForm: {
        configName: '提现配置',
        configKey: 'withdraw_config',
        configType: 'N',
        configValue: ''
      },
      // 表单校验
      rules: {
        min: [
          {required: true, message: "密码不能为空", trigger: "change"}
        ],
        fee: [
          {min: 0,max:999,message:"提现手续费介于0 到 999 之间",trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getConfig()
  },
  methods: {
    /** 查询参数配置列表 */
    getConfig() {
      getSettingByKey(this.configKey).then(response => {
        this.settingForm = response.data
        let configValue = response.data.configValue
        console.log(configValue)
        if (!configValue) {
          this.reset()
        } else {
          this.form = JSON.parse(configValue)
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        min: 0,
        max: 9999999,
        fee: 0,
        audit: true
      }
      this.resetForm('form')
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          console.log(JSON.stringify(this.form))
          this.settingForm.configValue = JSON.stringify(this.form)
          updateSetting(this.settingForm).then(response => {
            this.$modal.msgSuccess('修改成功')
            this.getConfig()
          })
        }
      })
    }
  }
}
</script>

<style>
.box-card{
  margin-top: 20px;
}
</style>
